<template>
   <div>
      <h2>报修统计</h2>
      <div id="chartthree" class="three">

      </div>
   </div>
</template>

<script setup>
import { inject, onMounted, reactive } from "vue";
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
let $echarts = inject("echarts")


onMounted(() => {
   let myChart = $echarts.init(document.getElementById("chartthree"))

   Link(apiurl.chartDataThree).then((ok) => {
      console.log(ok);

      myChart.setOption({
         series: [
            {
               type: "pie",
               data: ok.data,
               radius: [10, 100],
               center: ["50%", "45%"],
               roseType: 'area'
            }
         ],
         legend: {
            orient: "vertical",
            left: "left"
         },
         tooltip: {

         }
      })

   })

})
</script>

<style lang='scss' scoped>
h2 {
   height: 0.4rem;
   color: #000000;
   line-height: 0.2rem;
   text-align: center;
   font-size: 0.4rem;
}

.three {
   height: 4.5rem;
}
</style>